<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Captcha</title>
		<link rel="stylesheet" href="captcha.css" />
		<style>
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<!-- https://codepen.io/stevenlei/pen/WNpLoJO -->
		<div id="captcha">
			<div id="handle">
				<span></span>
			</div>
		</div>

		<script>
			let shouldMove = false;
			const captcha = document.querySelector("#captcha");
			const handle = document.querySelector("#handle");
			const button = document.querySelector("#handle span");

			button.addEventListener("mousedown", (e) => {
				shouldMove = true;
			});

			window.addEventListener("mousemove", (e) => {
				if (shouldMove) {
					const offsetLeft = handle.getBoundingClientRect().left;
					const buttonWidth = button.getBoundingClientRect().width;
					console.log("e.clientX", e.clientX);
					console.log("offsetLeft", offsetLeft);
					captcha.style.setProperty(
						"--moved",
						`${e.clientX - offsetLeft - buttonWidth / 2}px`
					);
				}
			});

			window.addEventListener("mouseup", (e) => {
				if (shouldMove) {
					const finalOffset =
						e.clientX - handle.getBoundingClientRect().left;

					if (finalOffset >= 430 && finalOffset <= 450) {
						// pass
						captcha.classList.add("passed");
					} else {
						// failed
						captcha.style.setProperty("--moved", "0px");
					}

					shouldMove = false;
				}
			});
		</script>
	</body>
</html>
